<template>
	<view class="content">
		<!-- <view class="logo"></view> -->
		<view class="v-bg" v-if="step==1">
			<text class="guanka">第一关</text>
			<text class="timu">此技术应用于什么领域？</text>
			<text class="xuanxiang">A.信息技术 B.网络 C.医疗 D.其他</text>
		</view>
		<view class="v-bg" v-if="step==2">
			<text class="guanka">第二关</text>
			<text class="timu">此技术应用于什么领域？</text>
			<text class="xuanxiang">A.信息技术 B.网络</text>
		</view>
		<!-- 第一关 -->
		<view class="game-box" v-if="step==1">
			<view class="timu1-list" v-for="(item,index) in timuList1" :key="index">
				<image :src="item.src" :class="'a1-1-'+item.id"></image>
				<text :class="'a1-1-zimu-'+item.id">{{item.zimu}}</text>
			</view>
			<view class="ball" :style="{top:top+'px',left:left+'px'}" @touchstart="kaishi" @touchend="jieshu">

			</view>
			<!-- <view class="xuxian" :style="{transform:'rotate('+jiantoujiaodu+'deg)'}"></view> -->
			<view class="xuxian" :style="{transform:'rotate('+jiantoujiaodu+'deg)'}" v-if="isBegin"></view>
		</view>
		<!-- 第二关 -->
		<view class="game-box" v-if="step==2">
			<view class="timu1-list" v-for="(item,index) in timuList2" :key="index">
				<image :src="item.src" :class="'a1-2-'+item.id"></image>
				<text :class="'a1-2-zimu-'+item.id">{{item.zimu}}</text>
			</view>
			<view class="ball" :style="{top:top+'px',left:left+'px'}" @touchstart="kaishi" @touchend="jieshu">

			</view>
			<view class="xuxian" :style="{transform:'rotate('+jiantoujiaodu+'deg)'}" v-if="isBegin"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1,
				isBegin: false, //是否开始触摸小球
				timuList1: [{
						id: 'a1',
						src: '../../static/a1.png',
						zimu: 'A'
					},
					{
						id: 'a2',
						src: '../../static/a2.png',
						zimu: 'B'
					},
					{
						id: 'a3',
						src: '../../static/a3.png',
						zimu: 'C'
					},
					{
						id: 'a4',
						src: '../../static/a4.png',
						zimu: 'D'
					}
				],
				timuList2: [{
						id: 'a1',
						src: '../../static/a1.png',
						zimu: 'A'
					},
					{
						id: 'a2',
						src: '../../static/a2.png',
						zimu: 'B'
					}
				],
				top: 0, //小球距离顶部位置
				left: 0, //小球距离左边位置
				ballW: 114, //小球宽度
				ballH: 126, //小球高度
				w: 328, //画布宽度
				h: 508, //画布高度
				jiantoujiaodu: 0,
				timer: null,
				timeTemp1: null,
				timeTemp2: null,
				step_1_daan: [107, 112, 73], //第一题正确答案 三个值分别是角度范围1 角度范围2 A答案选项的top值（如果正确答案是B 就换成B的TOP值，去样式里找）
				step_2_daan: [98, 102, 73], //第二题正确答案
			};
		},
		onShow() {
			this.top = 445
			this.left = this.w / 2 - this.ballW / 2
			// this.jiantou()
		},
		destroyed() {
			this.$music.playBgm({
				mute: true
			})
		},
		methods: {

			kaishi() {
				// clearInterval(this.timeTemp1)
				console.log('开始')
				this.isBegin = true
				let step = 1
				this.timeTemp1 = setInterval(() => {

					if (step == 1 && this.jiantoujiaodu < 90) {
						this.jiantoujiaodu += 2
						// console.log('++', this.jiantoujiaodu)
					} else {
						step = 2
						this.jiantoujiaodu -= 2
						// console.log('--', this.jiantoujiaodu)
						if (step == 2 && this.jiantoujiaodu < -90) {
							step = 1
						}
					}
				}, 30)

			},
			jieshu() {
				this.isBegin = false
				if (this.step == 1) {
					this.ballYunDong1()
				} else {
					this.ballYunDong2()
				}


				clearInterval(this.timeTemp1)
				console.log('结束')
			},
			ballYunDong1() {
				let x = this.top
				let y = this.left
				let r = 0
				let jiaodu = 90 - this.jiantoujiaodu
				console.log('球发射角度', jiaodu)
				this.timeTemp2 = setInterval(() => {
					r -= 5
					this.top = x + Math.sin(jiaodu * (Math.PI / 180)) * r
					this.left = y - Math.cos(jiaodu * (Math.PI / 180)) * r
					// console.log('x', this.top)
					// console.log('y', this.left)
					if (jiaodu >= this.step_1_daan[0] && jiaodu <= this.step_1_daan[1] && this.top <= this
						.step_1_daan[2]) {
						clearInterval(this.timeTemp2)
						this.resetBall()
						//更新游戏次数和票数
						uniCloud.callFunction({
							name: 'updata-game',
							data: {
								openid: uni.getStorageSync('openid')
							}
						}).then(res => {
							uni.setStorageSync('userInfo', res.result.data[0])
							let shengyucishu = 4 - res.result.data[0].youxijihui
							if (shengyucishu != 4) {
								uni.showModal({
									content: '恭喜您回答正确\n共获得' + shengyucishu + '次投票机会',
									showCancel: true,
									cancelText: '去投票',
									confirmText: '继续游戏',
									success: (res) => {
										if (res.confirm) {
											//继续游戏
											this.step = 2
										} else {
											//去投票
											uni.navigateTo({
												url: '../main/main'
											})
										}
									}
								})
							} else {
								uni.showModal({
									content: '4次游戏助力机会已用完\n您可明日继续投票\n \n同一WWID每天一次直接投票机会\n截止时间：11月3日23:59',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: '../main/main'
											})
										}
									}
								})
							}


						})


					}

					if (this.top < 0) {
						uni.showModal({
							content: '很抱歉\n回答错误',
							showCancel: true,
							cancelText: '返回',
							confirmText: '再玩一次',
							success: (res) => {
								if (res.confirm) {
									//返回

								} else {
									//再玩一次
									uni.navigateTo({
										url: '../main/main'
									})
								}
							}
						})
						clearInterval(this.timeTemp2)
						this.resetBall()
					}
				}, 10)
			},
			ballYunDong2() {
				let x = this.top
				let y = this.left
				let r = 0
				let jiaodu = 90 - this.jiantoujiaodu
				console.log('球发射角度', jiaodu)
				this.timeTemp2 = setInterval(() => {
					r -= 5
					this.top = x + Math.sin(jiaodu * (Math.PI / 180)) * r
					this.left = y - Math.cos(jiaodu * (Math.PI / 180)) * r
					// console.log('x', this.top)
					// console.log('y', this.left)
					if (jiaodu >= this.step_2_daan[0] && jiaodu <= this.step_2_daan[1] && this.top <= this
						.step_2_daan[2]) {
						clearInterval(this.timeTemp2)
						this.resetBall()
						//更新游戏次数和票数
						uniCloud.callFunction({
							name: 'updata-game',
							data: {
								openid: uni.getStorageSync('openid')
							}
						}).then(res => {
							uni.setStorageSync('userInfo', res.result.data[0])
							let shengyucishu = 4 - res.result.data[0].youxijihui
							if (shengyucishu != 4) {
								uni.showModal({
									content: '恭喜您回答正确\n共获得' + shengyucishu + '次投票机会',
									showCancel: true,
									cancelText: '去投票',
									confirmText: '继续游戏',
									success: (res) => {
										if (res.confirm) {
											//继续游戏
											this.step = 1
										} else {
											//去投票
											uni.navigateTo({
												url: '../main/main'
											})
										}
									}
								})
							} else {
								uni.showModal({
									content: '4次游戏助力机会已用完\n您可明日继续投票\n \n同一WWID每天一次直接投票机会\n截止时间：11月3日23:59',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: '../main/main'
											})
										}
									}
								})
							}


						})


					}

					if (this.top < 0) {
						uni.showModal({
							content: '很抱歉\n回答错误',
							showCancel: true,
							cancelText: '返回',
							confirmText: '再玩一次',
							success: (res) => {
								if (res.confirm) {
									//返回

								} else {
									//再玩一次
									uni.navigateTo({
										url: '../main/main'
									})
								}
							}
						})
						clearInterval(this.timeTemp2)
						this.resetBall()
					}
				}, 10)
			},
			//重置
			resetBall() {
				clearInterval(this.timeTemp2)
				this.top = 445
				this.left = this.w / 2 - this.ballW / 2

			},
			//更新游戏机会
			updataGameChange() {
				uniCloud.callFunction({
					name: 'get-userinfo',
					data: {
						openid: uni.getStorageSync('openid')
					},
					success: (res) => {
						console.log(res)
						uni.setStorageSync('userInfo', res.result.data[0])
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background: url('@/static/bg1.jpg') no-repeat center top;
		background-size: 100% auto;
		height: 100%;
		overflow: hidden;
	}

	.logo {
		width: 750rpx;
		height: 310rpx;
		background: url('@/static/toupiao/toupiao-logo.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.v-bg {
		width: 694rpx;
		height: 298rpx;
		background: url('@/static/timukuang.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		// margin-top: -40rpx;
		color: #fff;
	}

	.guanka {
		font-size: 58rpx;
	}

	.timu {
		font-size: 38rpx;
		margin: 20rpx auto;
	}

	.xuanxiang {
		font-size: 26rpx;
	}

	.game-box {
		width: 328px;
		height: 508px;
		// border: 1px solid #fff;
		position: relative;
		// overflow: hidden;
	}

	.a1-1-a1 {
		width: 81px;
		height: 81px;
		position: absolute;
		left: 12px;
		top: 73px;
	}

	.a1-1-zimu-a1 {
		position: absolute;
		left: 44px;
		top: 154px;
		font-size: 24px;
		color: #fff;
	}

	.a1-1-a2 {
		width: 81px;
		height: 81px;
		position: absolute;
		left: 79px;
		top: 0px;
	}

	.a1-1-zimu-a2 {
		position: absolute;
		left: 114px;
		top: 81px;
		font-size: 24px;
		color: #fff;
	}

	.a1-1-a3 {
		width: 81px;
		height: 81px;
		position: absolute;
		left: 176px;
		top: 0px;
	}

	.a1-1-zimu-a3 {
		position: absolute;
		left: 204px;
		top: 81px;
		font-size: 24px;
		color: #fff;
	}

	.a1-1-a4 {
		width: 81px;
		height: 81px;
		position: absolute;
		left: 235px;
		top: 73px;
	}

	.a1-1-zimu-a4 {
		position: absolute;
		left: 266px;
		top: 154px;
		font-size: 24px;
		color: #fff;
	}

	.a1-2-a1 {
		width: 81px;
		height: 81px;
		position: absolute;
		left: 54px;
		top: 73px;
	}

	.a1-2-zimu-a1 {
		position: absolute;
		left: 84px;
		top: 154px;
		font-size: 24px;
		color: #fff;
	}

	.a1-2-a2 {
		width: 81px;
		height: 81px;
		position: absolute;
		left: 191px;
		top: 73px;
	}

	.a1-2-zimu-a2 {
		position: absolute;
		left: 224px;
		top: 154px;
		font-size: 24px;
		color: #fff;
	}

	.ball {
		width: 114px;
		height: 126px;
		background: url('@/static/ball.png') no-repeat center center;
		background-size: 100% 100%;
		position: absolute;
		// z-index: 10;
	}

	.xuxian {
		width: 1px;
		height: 130px;
		border-left: 1px dashed rgba(255, 255, 255, 0.6);
		position: absolute;
		left: 50%;
		// transform: translateX(-50%);
		bottom: 36px;
		transform-origin: left bottom;
		// transform: rotate(0deg);
	}

	.xuxian-donghua {
		animation: 1s jiantou infinite linear;
	}

	@keyframes jiantou {
		0% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(0deg);
		}

		75% {
			transform: rotate(-90deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>
